<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉选项</title>
</head>
<body>
    <form name="frm">
        <select name="city" onchange="getArea(this)">
            <option>--请选择--</option>
            <option value="gz">广州</option>
            <option value="sz">深圳</option>
            <option value="fs">佛山</option>
        </select>
        <select name="area"></select>
    </form>
</body>
</html>
<script>
    function getArea(obj) {
        var area = document.frm.area;
        if (obj.value == 'gz'){
            var option = new Option("天河区","thq");
            area.appendChild(option);

            option = new Option("白云区","byq");
            area.appendChild(option);

            option = new Option("海珠区","hzq");
            area.appendChild(option);
        }else if (obj.value == 'sz'){
            var option = new Option("南山区","nsq");
            area.appendChild(option);

            option = new Option("福田区","ftq");
            area.appendChild(option);

            option = new Option("宝安区","baq");
            area.appendChild(option);
        }else {
            var option = new Option("南海区","nhq");
            area.appendChild(option);

            option = new Option("顺德区","sdq");
            area.appendChild(option);

            option = new Option("三水区","ssq");
            area.appendChild(option);
        }
    }
</script>